/**
 * @description
 * @author aaron
 */
import Editor from 'wangeditor' // npm 安装
import Vue from 'vue';

const {$, BtnMenu} = Editor;
import raminded from "./raminded";

// 创建构造器
const Profile = Vue.extend(raminded)
import {insertImgFn} from "../../../utils/richText";

class Reminded extends BtnMenu {
    constructor(editor) {
        const vm = new Profile({propsData: {editor}}).$mount()
        const $elem = $(vm.$el);
        super($elem, editor);
        this.reminded = vm;
        vm.$on('change', (list) => {
            if (Array.isArray(list) && list.length > 0) {
                insertImgFn(editor, list.map(value => {
                    return {
                        style: "padding:0 4px;",
                        url: "javascript:void(0)",
                        name: `@&#65279${value.user_id > 0 ? value.nickname : '所有人'}&#65279`,
                        data: {
                            user_id: value.user_id
                        }
                    }
                }))
            }
        })
        // 富文本销毁是销毁
        editor.beforeDestroy(() => this.destroy())
    }

    /**
     * 点击事件
     */
    clickHandler() {
        const that = this
        // 做任何你想做的事情
        // 可参考【常用 API】文档，来操作编辑器
        // console.log(window.event, ...arguments);
        // const popcorn = dig
        // const e = window.event;
        // createPopper(e.target, popcorn, {
        //     placement: 'top',
        // });
    }

    // 菜单是否被激活（如果不需要，这个函数可以空着）
    // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
    // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
    tryChangeActive() {
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        // this.active()
        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
    }

    destroy() {

    }
}

export default Reminded
